<template lang="html">
  <div id="charts">
    <div id="bm" :style="{width:'100%',height:'100%'}"></div>
  </div>
</template>

<script>
  import co from 'co'
  import echarts from 'echarts'

  export default {
    data () {
      title: '抄表率'
      return {
        texttile: '',
        xc: ''
      }
    },
    ready () {
      this.set()
    },
    methods: {
      set () {
        this.xc = echarts.init(document.getElementById('bm'))
        this.xc.setOption({
          tooltip : {
            formatter: "{b} <br/>{a} : {c}%"
          },
          toolbox: {
            feature: {
              restore: {},
              saveAsImage: {}
            }
          },
          series: [
            {
              name: '业务指标',
              type: 'gauge',
              detail: {formatter:'{value}%'},
              data: [{value: 90.5, name: '抄表率'}],
              axisLine : {
                show : true,
                lineStyle : { // 属性lineStyle控制线条样式
                  color : [ //表盘颜色
                    [ 0.2, "#c33430" ],//0-50%处的颜色
                    [ 0.8, "#4EBFEB" ],//51%-70%处的颜色
                    [ 1,"#08CB3E" ]//90%-100%处的颜色
                  ],
                  width : 70//表盘宽度
                }
              },
              splitLine : { //分割线样式（及10、20等长线样式）
                length : 70,
                lineStyle : { // 属性lineStyle控制线条样式
                  width : 2
                }
              },
              axisTick : { //刻度线样式（及短线样式）
                length : 20
              },
            }
          ]
        })
      },
      searchdata () {
        let getGen =getData(this)
        co(getGen)
      }
    }

  }
</script>
